<!-- 组织架构 -->
<template>
    <div class="organizational">
        <BreadCrumb :firstMenu="'系统管理'" :secondMenu="'组织架构'"></BreadCrumb>
        <el-row  class="operBtns">
            <el-button  icon="el-icon-plus" @click="add()">添加</el-button>
            <el-button  icon="el-icon-delete" @click="deleteMore">批量删除</el-button>
        </el-row>
        <div class="organizationlContent">
            <div class="organizationalLeft">
                <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
            </div>
            <div class="organizationalRight">
                <CanteenTable :parentTableData="tableData" :parentTableNo="tableNo" :parentDefaultPages="defaultPages" v-on:parentSelect="selectCurrent" v-on:parentSetPageSize="handleSizeChange" v-on:parentSetPageIndex="handleCurrentChange"></CanteenTable>
            </div>
        </div>
        <AddOrganizational v-on:cancelModule="cancelModule" v-if="dialogVisible"></AddOrganizational>
    </div>
</template>

<script>
import axios from 'axios';
import BreadCrumb from '@/components/breadCrumb/breadCrumb.vue';
import CanteenTable from '@/views/organizational/components/canteenTable/canteenTable.vue';
import AddOrganizational from '@/views/organizational/components/addOrganizational/addOrganizational.vue';
export default {
    components: {
        CanteenTable,
        AddOrganizational,
        BreadCrumb
    },
    data() {
        return {
            urlPrev: 'http://sysapi.free.idcfengye.com/',
            currentPage: 1,
            menus: [],
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            defaultPages: {
                pageSize: 10,
                pageIndex: 1,
            },
            tableData: [],
            tableNo: 1, // 1代表组织机构下面的食堂列表   2代表食堂
            dialogVisible: false,
            multipleSelection: []
        };
    },
    mounted() {
        this.getMenus();
    },
     methods: {
      handleNodeClick(data) {
          console.log('组织架构', data);
          if(data.isCanteen) {
              this.getCanteens(data);
              this.tableNo = 2;
          }else {
              this.getCanteenByOrgId(data);
              this.tableNo = 1;
          }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 每页显示条数
     handleSizeChange(val) {
        this.defaultPages.pageSize = val;
     },
    // 跳转到第几页
     handleCurrentChange(val) {
        this.defaultPages.pageIndex = val;
     },
      // 获取组织架构树
      getMenus() {
            const url = this.urlPrev + `api/Organization/GetOrganizationTree`;
            axios({ method: 'post', url: url })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        
                        const rspDatas = rsp.data.result;
                         rspDatas.forEach(item => {
                            item['isCanteen'] = false;
                        });
                        this.menus = rspDatas;
                        const secondMenus = [];
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
      },
      // 获取组织架构下面的食堂列表
      getCanteens(item) {
          const url = this.urlPrev + `api/Restaurant/GetRestaurantServicePageList`;
          const params = {
              PageSize: this.PageSize,
              PageIndex: this.PageIndex
          }
          const currentItem = this.menus[0].children.filter(p => {p.id === item.id});
            axios({ method: 'post', url: url, data: params })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        this.tableData = rsp.data;
                        console.log(this.tableData, this.menus);
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
      },
      // 根据组织获取食堂列表
      getCanteenByOrgId(data) {
           const url = this.urlPrev + `api/Restaurant/GetRestaurantServiceListByOrgId?OrgId=`+data.id;
            axios({ method: 'post', url: url })
                .then(rsp => {
                    if (rsp.data.status == 1) {
                        const rspDatas = rsp.data.result;
                        rspDatas.forEach(item => {
                            item['isCanteen'] = true;
                        });
                        data.children = rspDatas;
                    } else {
                        this.$message({
                            message: rsp.data.message,
                            type: 'error',
                        });
                    }
                })
                .catch(err => console.log(err));
      },
      // 批量删除
      deleteMore() {
          if(!this.multipleSelection.length) {
                 this.$message({
                    message: '请选择至少一种组织架构或者食堂',
                    type: 'warn',
                });
            }else {

            }
      },
      // 批量选择
      selectCurrent(list) {
          this.multipleSelection = list;
      },
      // 新增
      add() {
          this.dialogVisible = true;
      },
       // 关闭模态框回调
        cancelModule(val) {
            this.dialogVisible = false;
        },
    }
};
</script>

<style scoped lang="scss">
.organizational {
    width: 100%;
    height: 100%;
    @include flex();
    flex-direction: column;
    .organizationlContent {
        width: 100%;
        height: calc(100% - 135px);
        @include flex();
        .organizationalLeft {
            width: 215px;
            height: 100%;
            background: white;
            overflow-y: auto;
            .el-tree {
                padding-top: 15px;
            }
        }
        .organizationalRight {
            flex: 1;
            max-width: calc(100% - 215px);
            padding-top: 15px;
        }
    }
}
</style>
